.badge{
	font-size: 1.2rem;
	display: block;
}
.danger{
	color: @error-color !important;
}
.bold{
	font-weight: bold;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}


.null{
	.valign;
	color: @black26;
	text-align: center;
	.icon{
		font-size: 4rem;
	}
}
.null-inline{
	margin: 1rem;
	color: @black26;
	text-align: center;
	.icon{
		font-size: 4rem;
	}
}
.success{
	.valign;
	text-align: center;
	color: @color2;
	.icon{
		display: block;
		border: 1px solid;
		border-radius: 50%;
		margin-bottom: 1rem;
		padding: 1rem;
		font-size: 4rem;
		background-color: @color2;
		color: @white87;
	}
	div{
		display: inline-block;
		clear: both;
	}
}


// flex box
.flex{
	display: -webkit-box;
	-webkit-flex-flow: row;
	-webkit-box-orient: horizontal;
	-webkit-box-align: center;
	& > *{
		display: block;
	}
}
.vflex{
	display: -webkit-box;
	-webkit-flex-flow: column;
	-webkit-box-orient: vertical;
}
.flex-weight{
	-webkit-box-flex: 1;
}

// vertical align
.valign{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
}
.valign-left{
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
}
.valign-right{
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
}

// border radius
.radius(@radius: 2px) {
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
.u(@x: 3rem){
	height: @x;
	line-height: @x;
}
.q(@x: 3rem){
	height: @x;
	width: @x;
	line-height: @x;
	text-align: center;
}
